<template>
	<div class="Jregister">
		<div class="Jregister_logo flex align_center justify_cen">
			<img src="../../../../static/img/images/logo2.jpg" />
		</div>
		<div class="Jregister_body">
			<div class="Jregister_body_input flex align_center">
				<div class="Jregister_body_name">商户名</div>
				<input type="text" class="flex1" v-model="message.shop_name" />
			</div>
			<div class="Jregister_body_input flex align_center">
				<div class="Jregister_body_name">手机号</div>
				<input type="text" class="flex1" v-model="message.mobile" />
			</div>
			<div class="Jregister_body_input flex align_center">
				<div class="Jregister_body_name">验证码</div>
				<input type="text" class="flex1" v-model="message.sms_code"  />
				<v-Code :phoneNew='message.mobile'></v-Code>
			</div>
			<div class="Jregister_body_area">
				<p class="Jregister_body_areaTitle">
					区域选择
				</p>
				<div class="Jregister_body_areaChose clear2">
					<el-select v-model="message.province" placeholder="省" @change='provinceC' class='Jregister_body_areaSelect'>
					    <el-option
					      v-for="item in options1"
					      :key="item.name"
					      :label="item.name"
					      :value="item">
					    </el-option>
					</el-select>
					<el-select v-model="message.city" placeholder="市" @change='cityC' class='Jregister_body_areaSelect' style='margin: 0 2%;'>
					    <el-option
					      v-for="item in options2"
					      :key="item.name"
					      :label="item.name"
					      :value="item">
					    </el-option>
					</el-select>
					<el-select v-model="message.area" placeholder="区/县" @change='areaC' class='Jregister_body_areaSelect'>
					    <el-option
					      v-for="item in options3"
					      :key="item.name"
					      :label="item.name"
					      :value="item">
					    </el-option>
					</el-select>
				</div>
				
			</div>
			<div class="Jregister_body_pic">
				<p class="Jregister_body_areaTitle">
					企业认证
				</p>
				<div class="Jregister_body_picUpload">
					<el-upload
					  class="avatar-uploader"
					  :action="defines.upload_img"
					  :show-file-list="false"
					  :on-success="handleAvatarSuccess"
					  name='userfile'
					>
					  <img v-if="imageUrl" :src="imageUrl" class="avatar">
					  <div class="Jregister_body_picPlus" v-else>
					  	<div class="Jregister_body_picI">
					  		<i  class="el-icon-plus avatar-uploader-icon"></i>
					  	</div>
					  	<p class="Jregister_body_picP">添加营业执照照片</p>
					  </div>
					</el-upload>
				</div>
			</div>
			<div class="Jregister_body_input flex align_center" style="margin-top: 3rem;">
				<div class="Jregister_body_name">授权码</div>
				<input type="text" class="flex1" disabled="disabled" v-model="message.auth_code" />
			</div>
			<el-button round class='Jregister_body_button' @click='jump'>提交申请</el-button>
		</div>
	</div>
</template>

<script>
	import arrAll from '../../../../static/area.json';
	import { Toast } from 'mint-ui';
	import vCode from '../../common/yzm.vue';
	export default {
		components:{
            vCode
        },
		data: function() {
			
			return {
				message:{
					'shop_name':'',
					'mobile':'',
					'sms_code':'',
					'province':'',
					'city':'',
					'area':'',
					'province_id':'',
					'city_id':'',
					'area_id':'',
					'business_license':'',
					'auth_code':'',
				},
				
				options1:arrAll,
				options2:[],
				options3:[],
				imageUrl: ''
			}
		},
		mounted() {
			this.message.auth_code=this.peopleList.reg_invitation_code;
		},
		methods: {
			jump(){
				this.message.business_license=this.imageUrl;
				this.message.member_id=window.uid;
				console.log(this.message);
				for(let i in this.message){
					if(this.message[i]==''||this.message[i]==null){
						Toast('请先填写数据')
						return false;
					}
				}
				this.ajax(this, {
					'url': this.defines.shop_reg,
					'type': 'post',
					'data':this.message,
					'callback': data => {
						if(data.data.error_code==0) {
							Toast('注册成功')
							window.history.go(-1);

						} else {
							Toast(data.data.error_msg)
						}

					},
					'errorback': errory => {

					},

				})
//				this.$router.push({
//      			path: '/Jreturn',
//				})
			},
			provinceC(){
				if(this.message.province.sub){
					this.options2=this.message.province.sub;
				}
				this.message.city='';
				this.message.area='';
				this.message.province_id=this.message.province.id;
				this.message.province=this.message.province.name;
				
				
			},
			cityC(){
				if(this.message.city.sub){
					this.options3=this.message.city.sub;
				}
				this.message.area='';
				this.message.city_id=this.message.city.id;
				this.message.city=this.message.city.name;
			},
			areaC(){
				this.message.area_id=this.message.area.id;
				this.message.area=this.message.area.name;
				
			},
			handleAvatarSuccess(res, file) {
		        this.imageUrl = file.response.image;
		        Toast(res.error_msg)
		    },
		    
		}
	}
</script>

<style scoped>
	.Jregister_logo{
		height: 20rem;
		width: 100%;
		background: #000000;
	}
	.Jregister_logo img{
		width: 50%;
		display: block;
	}
	.Jregister_body{
		width: 86%;
		margin: 0 auto;
		padding: 2rem 0;
		
	}
	.Jregister_body_input{
		height: 3rem;
		width: 100%;
		margin-bottom: 2rem;
	}
	.Jregister_body_name{
		font-size: 1.6rem;
		margin-right: 1.6rem;
	}
	.Jregister_body_input input{
		height: 3rem;
		font-size: 1.4rem;
		line-height: 1.6rem;
		background: #e6e6e6;
		color: #000000;
		border-radius: 0.4rem;
		text-indent: 0.5rem;
	}
	.Jregister_body_code{
		border-radius: 0.4rem;
		padding: 0 1rem;
		background: #000;
		color: #f7bd40;
		font-size: 1.2rem;
		line-height: 3rem;
		height: 3rem;
		margin-left: 1rem;
	}
	.Jregister_body_area{
		width: 100%;
		
	}
	.Jregister_body_areaTitle{
		margin: 2rem 0;
		font-size: 1.6rem;
		color: #000;
		text-align: center;
	}
	.Jregister_body_areaSelect{
		width: 32%;
		float: left;
		border-radius: 0.4rem;
		overflow: hidden;
		
	}
	
	.Jregister_body_button{
		width: 65%;
		background: #000;
		color: #f7bd40;
		font-size: 1.6rem;
		margin: 0 auto;
		display: block;
	}
	.avatar{
		width: 100%;
		height: 10rem;
		object-fit: contain;
		
	}
</style>
<style>
	.Jregister .Jregister_body_areaSelect .el-input__inner{
		height: 2.5rem;
		line-height: 2.5rem;
		border:0.1rem solid #000000 !important;
		box-sizing: border-box;
		border-radius: 0.4rem;
		font-size: 1.2rem;
	}
	.Jregister .Jregister_body_areaSelect .el-input__suffix{
		right: 0;
		background: #000;
		
	}
	.Jregister .Jregister_body_areaSelect .el-input__suffix i{
		color: #f7bd40 !important;
	}
	.Jregister .Jregister_body_areaSelect .el-icon-arrow-up:before{
		content:"\E60C"
	}
	.Jregister .Jregister_body_picUpload .avatar-uploader .el-upload {
	    border: 1px dashed #000;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	    width: 80%;
	    margin: 0 auto;
	    display: block;
	}
	.Jregister .Jregister_body_picPlus{
		text-align: center;
		padding: 2.2rem 0;
	}
	.Jregister .Jregister_body_picI{
		background: #000;
		width: 7rem;
		height: 7rem;
		border-radius: 0.5rem;
		margin: 0 auto;
	}
	.Jregister .Jregister_body_picI i{
		font-size: 4.5rem;
		font-weight: bold;
		line-height: 7rem;
		color: #f7bd40;
	}
	.Jregister .Jregister_body_picP{
		color: #666666;
		font-size: 1.6rem;
		margin-top: 1.5rem;
	}
	
</style>